<!--
 * @Author: your name
 * @Date: 2021-08-10 09:30:01
 * @LastEditTime: 2021-08-10 16:50:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\3-html&css\day07\01-盒子模型的特性.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型的特性</title>
    <style>
        /* p元素本身没有padding */
        p{
            border:10px solid red;/*粗细 边框样式 边框颜色*/
            width:100px;
            height:100px;
            padding:50px;   /*写一个代表上右下左都是50px */
            margin:50px;
            /* 布局，使两个有宽高的不在一排的盒子浮动在一排中 */
            /* float:left; */
        }
         .p1 { 
             border:10px solid red;/*粗细 边框样式 边框颜色 */
            width:100px;
            height:100px;
            padding:50px;
            margin:50px;
        }   
        /* margin:兄弟元素 */
               /* 水平方向相加间隙
               垂直方向相叠间隙 */
            h1{
                border:10px solid red;
                margin:50px 100px 150px 200px;/*写四个代表上右下左 */
                padding:10px 20px 30px 40px;
            }
            a{
                border:10px solid red;
                padding:10px 20px; /*如果只有两个值，第一个上下，第二个左右*/
                display:inline-block;
            }
            span {
                border:10px solid red;
                display:block;
                padding:10px 20px 30px /*第一个值代表上 第二个值代表左和右 第三个值代表下*/
            }
    </style>
</head>
<body>
    <p>段落</p>
    <p class="p1">段落1</p>
    <h1>标题</h1>
    <a>默认行内元素</a>
    <span>默认行内元素</span>
</body>
</html>